<template>
    <el-menu unique-opened class="left-menu" 
             background-color="#304156" text-color="#ffffff" 
             active-text-color="#ffd04b" 
             router :default-active="$route.path">
        <div class="menu-title">
            <el-icon class="is-loading" size="20px">
                <Loading />
            </el-icon>
            <span style="margin-left:5px;">华夏影院管理平台</span>
        </div>
        <!-- 第一个子菜单 -->
        <el-sub-menu index="0">
            <template #title>
                <el-icon><Promotion /></el-icon>
                <span>管理员</span>
            </template>
            <!-- 代表菜单里面的每一项 -->
            <el-menu-item index="/Manager/AdminInfoList">管理员列表</el-menu-item>
            <el-menu-item index="/Manager/AddAdminInfo">新增管理员</el-menu-item>
        </el-sub-menu>
        <!-- 第二个子菜单 -->
        <el-sub-menu index="1">
            <template #title>
                <el-icon><UserFilled /></el-icon>
                <span>用户信息管理</span>
            </template>
            <!-- 代表菜单里面的每一项 -->
            <el-menu-item index="/Manager/CustomInfoList">用户信息列表</el-menu-item>
        </el-sub-menu>
        <!-- 第三个子菜单 -->
        <el-sub-menu index="2">
            <template #title>
                <el-icon><VideoCameraFilled /></el-icon>
                <span>影片管理</span>
            </template>
            <!-- 代表菜单里面的每一项 -->
            <el-menu-item index="/Manager/MovieInfoList">影片列表</el-menu-item>
            <el-menu-item index="/Manager/AddMovieInfo">新增影片</el-menu-item>
        </el-sub-menu>
        <!-- 第四个子菜单 -->
        <el-sub-menu index="3">
            <template #title>
                <el-icon><Platform /></el-icon>
                <span>影厅管理</span>
            </template>
            <el-menu-item index="/Manager/HallInfoList">影厅列表</el-menu-item>
            <el-menu-item index="/Manager/AddHallInfo">新增影厅</el-menu-item>
        </el-sub-menu>
        <!-- 第五个子菜单 -->
        <el-sub-menu index="4">
            <template #title>
                <el-icon><BellFilled /></el-icon>
                <span>排片管理</span>
            </template>
            <!-- 代表菜单里面的每一项 -->
            <el-menu-item index="/Manager/PlanInfoList">排片列表</el-menu-item>
            <el-menu-item index="/Manager/AddPlanInfo">电影排片</el-menu-item>
        </el-sub-menu>
        <!-- 第六个子菜单 -->
        <el-sub-menu index="5">
            <template #title>
                <el-icon><Histogram /></el-icon>
                <span>订单信息</span>
            </template>
            <el-menu-item index="5-0">订单列表</el-menu-item>
            <el-menu-item index="5-1">订单分析</el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>
<script>
import { Promotion,Loading,UserFilled,VideoCameraFilled,Platform,BellFilled,Histogram } from '@element-plus/icons-vue';
export default {
    name: 'LeftMenu',
    components: {
        Promotion,
        Loading,
        UserFilled,
        VideoCameraFilled,
        Platform,
        BellFilled,
        Histogram
    }
}
</script>
<style scoped lang="scss">
.left-menu {
    width: 100%;
    height: 100%;
    .menu-title {
        height: 50px;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        font-style: italic;
        background-color: #263445;
    }
}
</style>
